<template>
  <div id="motionMap">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div>
          <ul style="list-style: none">
            <li v-for="i in dataList" :key="dataList.uid">
              <div class="">
                <img style="border-radius: 50%;" :src=i.header height="30" width="30"/>
                <span class="data-text">{{ i.name }}</span>
              </div>
              <p><span>{{ i.text }}</span></p>
              <p><img class="data-img" :src="i.images"/></p>
              <p class="data-love"><i style="color: rgba(255,65,70,0.76)" class="fa fa-heart-o"></i><span
                class="data-up">{{ i.up }}</span></p>
            </li>
          </ul>
        </div>
        <span v-show="dataList.length===0">暂无数据...</span>
      </el-col>
    </el-row>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes=pageSizes
        :page-size=pageSize
        layout="total,sizes, prev, pager, next, jumper"
        :total="400" v-show="dataList.length!==0">
      </el-pagination>
    </div>
  </div>
</template>
<script>
// import {get} from "../../api/api";
import API from '../../api/index.js'
import happay from '@/api/happay'

export default {
  data() {
    return {
      dataList: [],
      currentPage: 1,
      pageSizes: [5, 10, 20],
      pageSize: 5,

    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    backTop() {
      document.getElementById('motionMap').scrollIntoView()
    },
    getData() {
      API.happay.getHappyData({type: 'gif', page: this.currentPage, count: this.pageSize}).then((data) => {
        if (data.code === 200) {
          this.dataList = data.result
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
      this.backTop()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
      this.backTop()
    },
  }
}

</script>

<style scoped lang="scss">
@import  "../../css/index.scss";

#motionMap {
  .data-text {
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
  }

  .data-up {
    margin-left: 5px;
    font-size: 12px;
  }

  .data-love {
    text-align: right;
  }

}
</style>